<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript">
		 $(function() {
	       
		// setup slider
		$( "table  span" ).each(function() {
			// read initial values from markup and remove that
			var value = parseInt( $( this ).text(), 10 );
			
			$( this ).empty().slider({
				value: value,
				range: "min",
				min:0,
				max:100,
				animate: true,
				orientation: "vertical",
				slide: function( event, ui ) {
				 
				   $( "#"+$(this).attr("name")).val(ui.value );
			}
			});
		});
			 $("#s1 .ui-slider-handle").each(function(){
		 	
		 	   $(this).css("height","0.6em");
		 	  
		 	   //alert($(this).css("height"));
		 	});
		
		$( "table  input[type=text]" ).each(function() {
			
			
		   var audiotxt = $(this).attr("id");
		   var spanid= (audiotxt=="audio1"?"s1":"s2");
		   var value = $("#"+spanid).slider( "value");
			$(this).val(value);
		});
		
		
		$("table  input[type=button]").click(function(){


           var op =   $(this).attr("value");
		   var audiotxt = $(this).attr("name");
		   var spanid= (audiotxt=="audio1"?"s1":"s2");
		   var value = $("#"+spanid).slider( "value");
		   var smin=  $("#"+spanid).slider( "option","min");
		   if(op =="+"){
             $("#"+spanid).slider( "value",value+1);
			
             }
		   
		   
		   if(op=="-"){
          //  $("#"+spanid).slider( "value",value-1);
			 $("#"+spanid).slider( "option", "value", (value-1)<smin?smin:(value-1) );
			
              }
		     $( "#"+audiotxt).val($("#"+spanid).slider( "value"));
           

     })
	});
	
	
	
	
	
	
	
	
		</script>
		<style type="text/css">
		
		table  {
		             margin-left:188px;    
						
	                }
		  table span {
		         height:120px; 
						 width:40px;
						 float:left;
						 margin:8px;
					
						
	                }
					
          table  input[type=text] {
		                width:30px; 
						float:left; 
						
	                }
		</style>	
	</head>
	<body>
	 <div class="demo">

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
	<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
	Master volume
</p>
<table>
    <tr>
        <td>音频1</td>
        <td>音频2</td>
    </tr>
    <tr>
        <td><input type="text" id="audio1" readonly="readonly" /></td>
        <td><input type="text" id="audio2" readonly="readonly" /></td>
    </tr>
    <tr>
        <td><input type="button" name="audio1"  value="+" /></td>
        <td><input type="button" name="audio2"   value="+"/></td>
    </tr>
	<tr>
        <td><span id="s1" name="audio1">20</span></td>
        <td><span id="s2" name="audio2">30</span></td>
    </tr>
	<tr>
        <td><input type="button" name="audio1" value="-" /></td>
        <td><input type="button" name="audio2" value="-"/></td>
    </tr>
</table>

</div><!-- End demo -->

  
  
	</body>
</html>


